<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>排班系统</title>
    <!--本地依赖，未在源代码中提供-->
    <script type="text/javascript" src="/static/lib/vue.global.js"></script>
    <script type="text/javascript" src="/static/lib/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/style/pico.min.css" />

    <!--以下为依赖CDN，开发环境下需取消注释
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
    -->
    <script type="text/javascript" src="/static/script/main.js"></script>
  </head>

  <body>
    <main class="container" id="vueApp">
      <h1>排班系统</h1>
      <details open>
        <summary role="button">配置选项</summary>
        <div class="grid">
          <label for="num_employees"
            >员工数量
            <input id="num_employees" type="number" v-model="num_employees" />
          </label>
          <label for="start_date"
            >开始日期
            <input id="start_date" type="date" v-model="start_date" />
          </label>
          <label for="end_date"
            >结束日期
            <input id="end_date" type="date" v-model="end_date" />
          </label>
          <label for="num_days"
            >排班天数
            <input type="text" :value="num_days" id="num_days" readonly />
          </label>
        </div>
        <details open id="configSet">
          <summary role="button" class="secondary">班种选项</summary>
          <details open v-for="(shift,i) in shifts" :key="shift.id">
            <summary>
              班种{{i+1}}
              <a
                href="javascript:void(0)"
                role="button"
                class="secondary"
                @click="delShift(shift)"
                >x</a
              >
            </summary>
            <div class="grid">
              <label :for="'shift'+shift.id">
                名称
                <input
                  type="text"
                  :id="'shift'+shift.id"
                  v-model="shift.shift"
                />
              </label>
              <div></div>
              <div></div>
            </div>
            <label :for="'shift_constraints_switch'+shift.id">
              <input
                type="checkbox"
                :id="'shift_constraints_switch'+shift.id"
                role="switch"
                v-model="shift.is_shift_constraints"
              />
              连续上某班种的天数限制
            </label>
            <div class="grid" v-if="shift.is_shift_constraints">
              <input
                type="number"
                placeholder="最小允许值"
                required
                v-model="shift.shift_constraints.hard_min"
                :aria-invalid="!Boolean(shift.shift_constraints.hard_min 
                &&shift.shift_constraints.hard_min<=shift.shift_constraints.soft_min)"
              />
              <input
                type="number"
                placeholder="最好不小于该值"
                required
                v-model="shift.shift_constraints.soft_min"
                :aria-invalid="!Boolean(shift.shift_constraints.soft_min
                &&shift.shift_constraints.hard_min<=shift.shift_constraints.soft_min)"
              />
              <input
                type="number"
                placeholder="最大允许值"
                required
                v-model="shift.shift_constraints.hard_max"
                :aria-invalid="!Boolean(shift.shift_constraints.hard_max
                &&shift.shift_constraints.hard_max>=shift.shift_constraints.soft_max)"
              />
              <input
                type="number"
                placeholder="最好不大于该值"
                required
                v-model="shift.shift_constraints.soft_max"
                :aria-invalid="!Boolean(shift.shift_constraints.soft_max
                &&shift.shift_constraints.hard_max>=shift.shift_constraints.soft_max)"
              />
            </div>
            <label :for="'weekly_sum_constraints'+shift.id">
              <input
                type="checkbox"
                :id="'weekly_sum_constraints'+shift.id"
                role="switch"
                v-model="shift.is_weekly_sum_constraints"
              />
              每周上某班种的天数限制
            </label>
            <div class="grid" v-if="shift.is_weekly_sum_constraints">
              <input
                type="number"
                placeholder="最小允许值"
                required
                v-model="shift.weekly_sum_constraints.hard_min"
              />
              <input
                type="number"
                placeholder="最好不小于该值"
                required
                v-model="shift.weekly_sum_constraints.soft_min"
              />
              <input
                type="number"
                placeholder="最大允许值"
                required
                v-model="shift.weekly_sum_constraints.hard_max"
              />
              <input
                type="number"
                placeholder="最好不大于该值"
                required
                v-model="shift.weekly_sum_constraints.soft_max"
              />
            </div>
            <label :for="'days_sum_constraints'+shift.id">
              <input
                type="checkbox"
                :id="'days_sum_constraints'+shift.id"
                role="switch"
                v-model="shift.is_days_sum_constraints"
              />
              每n天上某班种的天数限制
            </label>
            <div class="grid" v-if="shift.is_days_sum_constraints">
              <input
                type="number"
                placeholder="天数"
                required
                v-model="shift.days_sum_constraints.days"
              />
              <input
                type="number"
                placeholder="最小允许值"
                required
                v-model="shift.days_sum_constraints.hard_min"
              />
              <input
                type="number"
                placeholder="最好不小于该值"
                required
                v-model="shift.days_sum_constraints.soft_min"
              />
              <input
                type="number"
                placeholder="最大允许值"
                required
                v-model="shift.days_sum_constraints.soft_max"
              />
              <input
                type="number"
                placeholder="最好不大于该值"
                required
                v-model="shift.days_sum_constraints.hard_max"
              />
            </div>
            <p>每周各天需要人员数</p>
            <div class="grid">
              <input
                v-for="(item,i) in weekdays"
                type="number"
                :placeholder="item"
                required
                v-model="shift.weekly_cover_demands[i]"
                :key="'weekdays'+i"
              />
            </div>
          </details>
          <a href="javascript:void(0)" role="button" @click="addShift"
            >增加班种</a
          >
        </details>
      </details>
      <div class="grid">
        <button  @click="loadConfig">加载上次配置</button>
        <button  @click="template">生成模板</button>
        <button type="submit" @click="submit">保存配置并开始排班</button>
      </div>
      <dialog open v-if="msg.isMsg">
        <article>
          <header>
            <a
              href="javascript:void(0)"
              aria-label="Close"
              class="close"
              @click="closeMsg"
            ></a>
            {{msg.title}}
          </header>
          <p v-for="msg in msg.msg">{{msg}}</p>
        </article>
      </dialog>
    </main>
  </body>
</html>
